<template>
  <div id="tmpl" class="mui-content">
    <div style="" class="banner">
      <!--swipe mint-ui-->
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in slider" :key="item.id">
          <img :src="item.picUrl">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!--mui 九宫格-->

    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/news/newslist">
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/photo/photolist">
          <span class="mui-icon mui-icon-img"></span>
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/goods/goodslist">
          <span class="mui-icon mui-icon-goods"></span>
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/liuyan">
          <span class="mui-icon mui-icon-msg"></span>
          <div class="mui-media-body">留言反馈</div>
        </router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/media/medialist">
          <span class="mui-icon mui-icon-media"></span>
          <div class="mui-media-body">视频专区</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/aboutus">
          <span class="mui-icon mui-icon-aboutus"></span>
          <div class="mui-media-body">联系我们</div>
        </router-link>
      </li>
    </ul>

  </div>
</template>
<script>
  import { getBannerImgs } from '@/api/home'
  import { ERR_OK } from '@/api/config'

  export default {
    data () {
      return {
        slider: []
      }
    },
    created () {
      this._getimgs()
    },
    methods: {
      _getimgs () {
        getBannerImgs().then((res) => {
          if (res.code === ERR_OK) {
            this.slider = res.data.slider
          }
        })
      }
    }
  }
</script>
<style scoped>
  .banner {
    height: 165px;
    background: #ccc;
  }

  .banner img {
    width: 100%;
    height: 100%;
  }

  .mui-grid-view.mui-grid-9 {
    background: #fff;
  }

  .mui-grid-view.mui-grid-9 {
    border: none;
  }

  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: none;
  }

  .mui-icon-home:before, .mui-icon-img:before, .mui-icon-goods:before, .mui-icon-msg:before, .mui-icon-media:before, .mui-icon-aboutus:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }

  .mui-icon-home:before {
    background-image: url("../../static/image/news.png");
  }

  .mui-icon-img:before {
    background-image: url("../../static/image/img.png");
  }

  .mui-icon-goods:before {
    background-image: url("../../static/image/pd.png");
  }

  .mui-icon-msg:before {
    background-image: url("../../static/image/ly.png");
  }

  .mui-icon-media:before {
    background-image: url("../../static/image/sp.png");
  }

  .mui-icon-aboutus:before {
    background-image: url("../../static/image/aboutus.png");
  }
</style>
